<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>business</title>
		<link href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">
		<style type="text/css">
			.form-dialog .form {
				padding-right: 200px;
			}
			.form-dialog {
				border: 1px solid #EEE;
			}
			.form-dialog .el-dialog {
				border-radius: 0px;
			}
			.form-dialog .el-dialog__header {
				background-color: #f5f5f5;
    			padding-top: 10px;
			}
			.form-dialog .el-dialog__header .el-dialog__headerbtn {
				top:15px;
			}
			.form-dialog .el-dialog__header .el-dialog__title {
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div id="app" v-show="showList">
			<input type="text" style="display: none" ref="contextPath" value="${cfg.contextPath}">
			<!--list begin-->
			<div class="list-warp">
				<!--tooltip begin-->
				<div class="tooltip-wrap">
					<el-row>
						<el-col :span='8'>
							<el-form size="medium" inline="true" :model="searchForm">
								<el-form-item>
									<el-input placeholder="请输入内容" v-model="searchForm.name"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button icon="el-icon-search" @click="searchClick">查询</el-button>
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="8">
							<el-button-group>
								<el-button type="primary" icon="el-icon-plus" size="medium" @click="addForm">新增</el-button>
								<el-button type="danger" icon="el-icon-delete" size="medium" @click="deleteItems">删除</el-button>
							</el-button-group>
						</el-col>
					</el-row>
				</div>
				<!--tooltip end-->
				<!--content begin-->
				<div class="content-wrap">
					<el-table
					    :data="tableData"
					    border
					    style="width: 100%"
					    :height="tableHeight"
					    size="medium" 
					    ref="multipleTable"
                        v-loading="loading"
                        element-loading-text="拼命加载中"
					    @selection-change="handleSelectionChange">
					    <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <el-table-column
					      type="index"
					      width="55">
					    </el-table-column>
						<#list table.fields as field>
						<#if !field.keyFlag>
						<el-table-column
							prop="${field.propertyName}"
							label="${field.comment}">
						</el-table-column>
						</#if>
						</#list>
					    <el-table-column label="操作" fixed="right" width="130">
					    	<template slot-scope="scope">
					    		<el-button
						          size="mini" icon="el-icon-edit"
						          @click="editItem(scope.row)"
						          ></el-button>
						        <el-button
						          size="mini"
						          type="danger"
						          icon="el-icon-delete" 
						          @click="deleteItem(scope.row.id)"
						          ></el-button>
					    	</template>
					    </el-table-column>
					  </el-table>
				</div>
				<!--content end-->
				<div class="page-wrap">
					<el-pagination 
						@size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="currentPage"
					    :page-sizes="[20, 30, 50, 100]"
					    :page-size="pageSize"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total">
					</el-pagination>
				</div>
			</div>
			<!--list end-->
			<div class="dialog">
				<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" modal="false" fullscreen="true" class="form-dialog">
				  <el-form ref="form" :model="form" label-width="150px" class="form">
				  <#list cfg.fields as field>
					  <#if field.keyFlag>
					  <input type="text" style="display: none;" v-model="form.${field.propertyName}">
					  <#else>
					  <el-form-item label="${field.comment}">
						  <el-input v-model="form.${field.propertyName}"></el-input>
					  </el-form-item>
					  </#if>
					  </#list>
					  <el-form-item>
						  <el-button type="primary" @click="onSubmit">保存</el-button>
						  <el-button @click="cancelForm">取消</el-button>
					  </el-form-item>
				  </el-form>
				</el-dialog>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
        <script src="https://cdn.bootcss.com/json5/0.5.1/json5.min.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
		<script src="${cfg.contextPath}/js/${cfg.module}/${cfg.func}.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
